<script setup lang="ts">
import { addflageList, detailflage, updataflageList } from '@fl/api/flagship/flagship'
import FlUpload from '@fl/components/fl-upload.vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['storeformchange'])
const route = useRoute()

type formType = {
    enterprieAbbreviation?: string
    enterprieIntroduction?: string
    enterprieName?: string
    enterprieTell?: string
    shopHistory?: string
    shopIntroduction?: string
    shopLabel?: string
    shopLinkMan?: string
    shopLinkManTell?: string
    shopLogo?: string
    shopName?: string
    unifiedSocialCreditIdentifier?: string
    brandImage?: string
    brandLogo?: string
}
const defaultform = ref<formType>({
    enterprieAbbreviation: '',
    enterprieIntroduction: '',
    enterprieName: '',
    enterprieTell: '',
    shopHistory: '',
    shopIntroduction: '',
    shopLabel: '',
    shopLinkMan: '',
    shopLinkManTell: '',
    shopLogo: '',
    shopName: '',
    unifiedSocialCreditIdentifier: '',
})
const form = ref<formType>({
    enterprieAbbreviation: '',
    enterprieIntroduction: '',
    enterprieName: '',
    enterprieTell: '',
    shopHistory: '',
    shopIntroduction: '',
    shopLabel: '',
    shopLinkMan: '',
    shopLinkManTell: '',
    shopLogo: '',
    shopName: '',
    unifiedSocialCreditIdentifier: '',
    brandLogo: '',
    brandImage: '',
})
const storeRef = ref<any>()
const isLoading = ref<boolean>(false)
const enterVisible = ref<boolean>(false)
const rules = {
    enterprieName: [{ message: '请输入企业名称', required: true, trigger: 'blur' }],
    shopLinkMan: [{ message: '请输入品牌联系人', required: true, trigger: 'blur' }],
    shopLinkManTell: [
        { message: '请输入品牌联系人电话', required: true, trigger: 'blur' },
        {
            message: '请输入正确的电话号码',
            pattern: /^1[3-9]\d{9}$/,
            trigger: 'blur',
        },
    ],
    shopName: [{ message: '请输入品牌名称', required: true, trigger: 'blur' }],
}
function updateForm(data: formType) {
    Object.assign(form.value, data)
    isLoading.value = false
    form.value.shopLogo = data.shopLogo || ''
}

// 校验表单数据
function validatechange(key) {
    storeRef.value.validate((valid) => {
        if (valid) {
            if (
                form.value.enterprieName
                && form.value.enterprieName.split('').filter(Boolean).length > 500
            ) {
                return false
            }
            if (key === '1') {
                // 修改品牌信息

                updataflageList(form.value).then((res) => {
                    if (res.data) {
                        ElMessage.success(res.msg)
                    }
                    else {
                        ElMessage.warning(res.msg)
                    }
                })
            }
            else {
                addflageList(form.value).then((res) => {
                    if (res.data) {
                        updateForm(defaultform.value as formType)
                        emit('storeformchange', res.data)
                        ElMessage.success(res.msg)
                    }
                    else {
                        ElMessage.warning(res.msg)
                    }
                })
            }
        }
    })
}
onMounted(() => {
    if (route.query.id) {
        isLoading.value = true
        enterVisible.value = true
        detailflage(route.query.id).then((res) => {
            updateForm(res.data as formType)
        })
    }
    else {
        enterVisible.value = false
    }
})
defineExpose({
    validatechange,
})
</script>

<template>
    <el-skeleton v-if="isLoading" />

    <el-form v-else
             ref="storeRef"
             :inline="true"
             :model="form"
             :rules="rules"
             label-width="150px"
    >
        <div class="left">
            <el-row>
                <el-col :span="18">
                    <el-form-item label="企业名称："
                                  prop="enterprieName"
                    >
                        <el-input v-model="form.enterprieName"
                                  :disabled="enterVisible"
                        />
                    </el-form-item>

                    <el-form-item label="企业简称："
                                  prop="enterprieAbbreviation"
                    >
                        <el-input v-model="form.enterprieAbbreviation"
                                  maxlength="50"
                        />
                    </el-form-item>

                    <el-form-item label="统一社会信用代码："
                                  prop="unifiedSocialCreditIdentifier"
                    >
                        <el-input v-model="form.unifiedSocialCreditIdentifier" />
                    </el-form-item>

                    <el-form-item label="企业电话："
                                  prop="enterprieTell"
                    >
                        <el-input v-model="form.enterprieTell" />
                    </el-form-item>

                    <el-form-item label="品牌名称："
                                  prop="shopName"
                    >
                        <el-input v-model="form.shopName"
                                  placeholder="请输入"
                        />
                    </el-form-item>

                    <el-form-item label="品牌联系人："
                                  prop="shopLinkMan"
                    >
                        <el-input v-model="form.shopLinkMan"
                                  placeholder="请输入"
                        />
                    </el-form-item>

                    <el-form-item label="品牌联系人电话："
                                  prop="shopLinkManTell"
                    >
                        <el-input v-model="form.shopLinkManTell"
                                  placeholder="请输入"
                        />
                    </el-form-item>

                    <el-form-item label="品牌标签：">
                        <div class="txtar">
                            <el-input v-model="form.shopLabel"
                                      type="textarea"
                                      placeholder="一个标签一行，最多保留四个标签"
                            />
                        </div>
                    </el-form-item>

                    <el-form-item label="公司介绍：">
                        <div class="txtar">
                            <el-input v-model="form.enterprieIntroduction"
                                      maxlength="500"
                                      type="textarea"
                                      placeholder="集团介绍，500字以内"
                            />
                        </div>
                    </el-form-item>

                    <el-form-item label="品牌介绍：">
                        <div class="txtar">
                            <el-input v-model="form.shopIntroduction"
                                      maxlength="500"
                                      type="textarea"
                                      :autosize="{ minRows: 2, maxRows: 8 }"
                                      placeholder="品牌介绍，500字以内"
                            />
                        </div>
                    </el-form-item>

                    <el-form-item label="品牌历程：">
                        <div class="txtar">
                            <el-input v-model="form.shopHistory"
                                      maxlength="500"
                                      type="textarea"
                                      :autosize="{ minRows: 2, maxRows: 8 }"
                                      placeholder="品牌历程，500字以内"
                            />
                        </div>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item prop="companyLogo">
                        <div class="upclass">
                            <FlUpload v-model="form.shopLogo" />

                            <div class="tip">
                                <label class="el-form-item__label">公司Logo</label>
                            </div>
                        </div>
                    </el-form-item>

                    <!-- <el-form-item prop="companyLogo">
                        <div class="upclass">
                            <FlUpload v-model="form.brandLogo" />

                            <div class="tip">
                                <label class="el-form-item__label">品牌Logo</label>
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item prop="companyLogo">
                        <div class="upclass">
                            <FlUpload v-model="form.brandImage" />

                            <div class="tip">
                                <label class="el-form-item__label">品牌图片</label>
                            </div>
                        </div>
                    </el-form-item> -->
                </el-col>
            </el-row>
        </div>
    </el-form>
</template>

<style lang="less" scoped>
.el-form {
    display: flex;
    flex-direction: row;
}
.upclass {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .tip {
        text-align: center;
    }
}
.el-input {
    width: 318px;
}

.el-form-item--default {
    margin-bottom: 18px;
}

.el-upload__text {
    width: 100px;
}

.el-upload__tip {
    margin-top: 80px;
}

:deep(.txtar .el-textarea__inner) {
    width: 320px;
}

.footer {
    width: auto;
    position: relative;
    right: 10px;
    bottom: -12px;
    margin: 10px;
}

.footer button {
    width: 100px;
}

.avatar-uploader {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    text-align: center;
}

.avatar {
    display: block;
    width: 300px;
    height: 300px;
}
</style>
